// 入口函数
$(function () {
    // 参数设置为全局对象， 因为将来筛选和分页都要用到
    let q = {
        pagenum: "1",	    //是	int	页码值
        pagesize: "2",	    //是	int	每页显示多少条数据
        cate_id: "",	    //否	string	文章分类的 Id
        state: ""	        //否	string	文章的状态，可选值有：已发布、草稿
    }
    initArticleList()
    // 需求1：初始化文章列表-封装成函数， 将来复用
    function initArticleList() { //调用初始化文章列表
        axios({
            method: "GET",
            url: "/my/article/list",
            //GET 类型用params属性， POST类型用data属性
            params: q
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${formatDate(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                            <button data-id='${ele.Id}' class="del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                     </tr>
                `)
            });
            // 循环结束后， 赋值
            $('tbody').empty().html(arr.join(''))
            // 分页
            renderPage(res.data.total)
        })
    }


    // 需求2： 初始化文章分类列表 - 封装成函数
    let form = layui.form
    initArtCateList()//函数不调用执行
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            console.log(res);
            if (res.data.status !== 0) {
                return layer.msg(res.data.messge)
            }
            // 成功 渲染
            let arr = [' <option value="">请选择文章所属分类</option>']
            res.data.data.forEach(ele => {
                arr.push(`
                    <option value="${ele.Id}">${ele.name}</option>
                    `)
            });
            // 循环结束赋值
            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            form.render() //可以渲染layui中的 select/sheckbox/radio            form.render()
        })
    }

    //需求3： 筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        // cate_id和state的值修改， 根据form 表单里面的值修改
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        // 重新渲染， 文章列表
        initArticleList()
    })
    $('#searchForm').on('reset', function () {
        q.cate_id = ''
        q.state = ''
        initArticleList()
    })


    // 需求4： 分页
    function renderPage(total) {
        let laypage = layui.laypage
        // 执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意： 这里的 test1 是ID 不用加#号
            count: total,// 数据总数， 从服务端的到
            limit: q.pagesize, //每页显示多少条
            curr: q.pagenum,//第几页
            //显示区域
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits: [2, 3, 4, 6.10],
            // 页面加载的时候， 页码切换的时候会触发， 每页显示条数改变的时候会触发
            jump: function (obj, first) {
                // 首次不执行
                if (!first) {
                    //把当前页改变， 重新渲染文章列表
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()

                }
            }

        })
    }


    // 需求5: 删除-事件委托/类名/id
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-id')
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
            //do something
            // 删除的ajax
            axios({
                method: 'GET',
                // 保留 删除                                                  
                url: '/my/article/delete/' + id
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.messge)
                }
                // 成功 提示， 刷新页面
                layer.msg('恭喜您， 删除文章成功')
                // 优化-短路运算， 前面的代码满足条件， 后面的才会执行
                $('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum--
                initArticleList()
            })

            layer.close(index);
        });
    })
})